import Link from 'next/link';
import { File } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import IndexButton from './index-button';
import { nile } from '@/lib/NileServer';

// Forcing to re-evaluate each time.
// This guarantees that users will only see their own data and not another user's data via cache
export const dynamic = 'force-dynamic';
export const dynamicParams = true;
export const revalidate = 0;
export const fetchCache = 'force-no-store';

export const BoardList = async ({
  organizationId,
}: {
  organizationId: string;
}) => {
  const tenantNile = await nile.withContext({ tenantId: organizationId });
  const files = await tenantNile.query('select * from file'); // no need for "where" clause since we are connecting to tenant db
  console.log('Number of files reported by board component:' + files.rowCount);

  return (
    <div className="space-y-4">
      <div className="flex items-center font-semibold text-neutral-700 text-primary">
        <File className="mr-2 h-6 w-6" />
        Files
      </div>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        {files.rows.map((file: any, index: any) => (
          <Card key={index} className="h-fit w-[300px]">
            <CardHeader>
              <CardTitle>{file.name}</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid w-full items-center gap-4">
                <div className="flex flex-col space-y-1.5">
                  <Label htmlFor="Index status">
                    Index: {file.isIndex ? 'Done' : 'Not Done'}
                  </Label>
                  <Label htmlFor="Page Amount">
                    Page Amount: {file.pageAmt}
                  </Label>
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <>
                {file.isIndex ? (
                  <Link href={`${file.tenant_id}/chat/${file.id}`}>Chat</Link>
                ) : (
                  <IndexButton file={file} />
                )}
              </>
              {/* Not implemented yet...
              <TrashBox file={file} />
               */}
            </CardFooter>
          </Card>
        ))}
      </div>
    </div>
  );
};

BoardList.Skeleton = function SkeletonBoardList() {
  return (
    <div className="gird-cols-2 grid gap-4 sm:grid-cols-3 lg:grid-cols-4">
      <Skeleton className="aspect-video h-full w-full p-2" />
      <Skeleton className="aspect-video h-full w-full p-2" />
      <Skeleton className="aspect-video h-full w-full p-2" />
      <Skeleton className="aspect-video h-full w-full p-2" />
      <Skeleton className="aspect-video h-full w-full p-2" />
      <Skeleton className="aspect-video h-full w-full p-2" />
      <Skeleton className="aspect-video h-full w-full p-2" />
      <Skeleton className="aspect-video h-full w-full p-2" />
    </div>
  );
};
